/**
 * 修改 智能测肤 专家建议
 * @author Zeon scplay@gmail.com
 * @date 2019/3/20
 * @copyright Created by Panxsoft.
 */
<style lang='less' rel="stylesheet/less" type="text/less">
.v-customer-expert-suggest-create {
  overflow-y: scroll;
  min-height: 600px;

  .ivu-form-item {
    margin-bottom: 25px;
  }

  .suggest-card {
    margin-bottom: 1rem;
  }

  /* 不显示的 tab pane 高度设置成 0，防止多个 tab pane 高度互相影响*/
  .height_zero {
    height: 0;
  }
  .controBtn .ivu-form-item-content {
    width: 180px !important;
    margin-left: 0 !important;
    margin-bottom: -32px;
  }
}
</style>
<template>
	<div
		:style="{'max-height':formMaxHeight(true)}"
		class="v-customer-expert-suggest-create">
		<Row
			type="flex"
			justify="start">
			<i-col
				span="23"
				push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="110"
					name="create-form"
				>
					<!-- Submit -->
					<Row>
						<Col
							span="2"
							push="16">
						<Form-item class="controBtn">
							<Button
								type="primary"
								@click="handleSubmit('formValidate')"
							>{{ $t('common.update') }}</Button>
							<Button
								type="warning"
								@click="handleReset('formValidate')">{{ $t('common.reset') }}</Button>
						</Form-item>
            </Col>
					</Row>

					<!-- 多语言 专家建议表单 -->
					<Row>
						<Col
							span="18"
							push="1">
						<Tabs v-model="current_tab_idx">
							<!-- 多语言 -->
							<!-- 首先从这里开始 locale_suggest选择语言-->
							<TabPane
								v-for="(locale_suggest, locale_idx) in formValidate.hm_skin_data"
								:key="`hm_tab_lang[${locale_idx}]`"
								:label="locale_suggest.language_name"
								:class="{ height_zero: current_tab_idx !== Number(locale_idx)}"
							>
								<Row>
									<Col span="6">
									<!-- 选择检测部位 -->
									<Form-item
										:label="$t('expert_suggest.wax_part')"
										prop="position_id">
										<Select
											v-model="current_position_idx"
											:placeholder="$t('common.please_select',{'field':$t('expert_suggest.wax_item')})"
											filterable
											transfer
										>
											<Option
												v-for="(position_item, position_idx) in formValidate.hm_skin_data[locale_idx].suggest_by_language"
												:value="position_idx"
												:key="`hm_select[${locale_idx}][${position_item.position_id}]`"
											>{{ position_item.position_name }}</Option>
										</Select>
									</Form-item>
                    </Col>
									<Col span="6">
									<!-- 选择检测项 -->
									<Form-item
										:label="$t('expert_suggest.wax_item')"
										prop="item_id">
										<Select
											v-model="current_item_idx"
											:placeholder="$t('common.please_select',{'field':$t('expert_suggest.wax_item')})"
											filterable
											transfer
										>
											<Option
												v-for="(item, item_id) in formValidate.hm_skin_data[locale_idx].suggest_by_language[current_position_idx].suggest_by_position"
												:value="item_id"
												:key="`hm_select_position[${locale_idx}][${item.position_id}][${item.item_id}]`"
											>{{ item.item_name }}</Option>
										</Select>
									</Form-item>
                    </Col>
								</Row>

								<!-- 专家建议表单 -->
								<Row
									v-for="(item, item_idx)
										in
											formValidate.hm_skin_data[locale_idx]
												.suggest_by_language[current_position_idx]
												.suggest_by_position[current_item_idx]
									.suggest_by_item"
									:key="`hm_item[${locale_idx}][${item.position_id}][${item.item_id}][${item_idx}]`"
									class="suggest-card"
								>
									<Col span="24">
									<Card>
										<p slot="title">{{ item.title }}</p>
										<!-- 成因分析 -->
										<Row>
											<Col span="10">
											<Form-item
												:label="$t('expert_suggest.wax_intro')"
												prop="name">
												<i-input
													v-model="item.analysis"
													:placeholder="$t('common.placeholder',{'field':$t('expert_suggest.wax_intro')})"
													:autosize="{minRows: 4}"
													name="hm-intro"
													type="textarea"
												/>
											</Form-item>
                          </Col>
											<!-- 专家建议 -->
											<Col
												span="10"
												offset="2">
											<Form-item
												:label="$t('expert_suggest.wax_suggest')"
												prop="name">
												<i-input
													v-model="item.suggest"
													:placeholder="$t('common.placeholder',{'field':$t('expert_suggest.wax_suggest')})"
													:autosize="{minRows: 4}"
													name="hm-suggest"
													type="textarea"
												/>
											</Form-item>
                          </Col>
										</Row>
									</Card>
                    </Col>
								</Row>
							</TabPane>
						</Tabs>
            </Col>
					</Row>
				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>
import Uploader from 'src/views/component/Uploader';
import { validateImage } from 'src/validate'; // 引入校验文件
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

export default {
	name: 'ExpertSuggestEditHm',
	components: {
		Uploader,
	},
	mixins: [computedFormMaxHeight],
	props: {
		items: {
			type: Array,
			default() {
				return [
					{ name: '水份', id: 'water' },
					{ name: '油份', id: 'oil' },
					{ name: '弹性', id: 'flex' },
				];
			},
		},

		hmSkinData: {
			type: Array,
			required: true,
		},
	},

	data() {
		return {
			current_tab_idx: 0,

			formValidate: {
				// 表单数据
				hm_skin_data: [],
			},

			ruleValidate: {
				// 表单验证规则
			},
			current_position_idx: 0,
			current_item_idx: 0,
		};
	},

	mounted() {
		this.formValidate.hm_skin_data = this.hmSkinData;
		// console.log(this.formValidate.hm_skin_data[0],'first');

		// this.formDataCreate();
	},

	methods: {
		/**
     * 提交表单
     * @param  {string} name {表单上对应的ref值}
     * @return {undefined}
     */
		handleSubmit(name) {
			this.formDataCreate();
		},
		/** *
     *
     * 重置按钮
     *  */

		handleReset(name) {
			this.formDataReset();
		},
		/**
     * 手动拼接表单数据
     * @return {Object} {拼接好的表单数据}
     */
		formDataCreate() {
			const postObject = {};
			console.log(this.formValidate.hm_skin_data, 'hm_skin_data');
			this.formValidate.hm_skin_data.forEach((locale_suggest) => {
				locale_suggest.suggest_by_language.forEach((position_suggest) => {
					position_suggest.suggest_by_position.forEach((tip_suggest) => {
						tip_suggest.suggest_by_item.forEach((suggest) => {
							const level_sort = suggest.customer_relate_hm_skin.level_sort;
							const key_nest_idx = `hm_skin_suggests[${locale_suggest.language_id}][${position_suggest.position_id}][${tip_suggest.item_id}][${level_sort}]`;
							// console.log(key_nest_idx,'aaa');
							postObject[`${key_nest_idx}[title]`] = suggest.title;
							postObject[`${key_nest_idx}[analysis]`] = suggest.analysis;
							postObject[`${key_nest_idx}[suggest]`] = suggest.suggest;
						});
					});
				});
			});

			const form_data = new FormData();

			Object.keys(postObject).forEach((key) => {
				form_data.append(key, postObject[key]);
			});

			this.$emit('post-hm', form_data);
		},

		// 重置表单拼接表单数据
		formDataReset() {
			this.$emit('del-hm');
		},
	},
};
</script>
